import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../store';
import { Link } from 'react-router-dom';
import { 
		ListItem,
		ListInfo,
		LoadMore
	} from '../style';

class List extends PureComponent {
	render() {
		const { list, getMoreList, page } = this.props;
		return (
			<div>
				{
					list.map((item, index) => {
						return (
							<ListItem key={index}>
								<img className="pic" alt="" src={item.get('imgUrl')} />
								<ListInfo>
									<Link to='/detail'><h3 className="title">{item.get('title')}</h3></Link>
									<p className="desc">{item.get('desc')}</p>
								</ListInfo>
							</ListItem>
						);
					})
				}

				<LoadMore onClick={() => getMoreList(page)}>更多内容</LoadMore>
			</div>
		)
	}
}

const mapStateToProps = (state) => ({
	list: state.getIn(['home', 'articleList']),
	page: state.getIn(['home', 'articlePage'])
});

const mapDispatchToProps = (dispatch) => ({
	getMoreList(page) {
		dispatch(actionCreators.getMoreList(page))
	}
})

export default connect(mapStateToProps, mapDispatchToProps)(List);